{% extends 'base.html' %}

{% block title %}
    职员管理-添加
{% endblock %}
{% block head %}
    <!-- Bootstrap Core CSS -->
    <link href="/static/lib/sb-admin/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="/static/lib/sb-admin/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="/static/lib/sb-admin/dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="/static/lib/sb-admin/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
{% endblock %}
{% block label %}
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">职员管理-添加</h1>
        </div>
        <!-- /.col-lg-12 -->
    </div>
{% endblock %}
{% block contenter %}
    <!-- /.row -->
    <div class="row">
        <div class="col-lg-12">


            <div class="row">
                <p></p>
                <form method="post" enctype="multipart/form-data">
                    <input id="csrf_token" name="csrf_token" type="hidden"
                           value="{{ csrf_token() }}">
                    <div class="form-group">
                        <label class="control-label">用户名：</label>
                        <input class="form-control" type="text" name="username">
                        <label class="text-primary username_error"></label>
                    </div>
                    <div class="form-group">
                        <label class="control-label">密码：</label>
                        <input class="form-control" type="password" name="password">
                        <label class="text-primary password_error"></label>
                    </div>
                    <div class="form-group">
                        <label class="control-label">昵称：</label>
                        <input class="form-control" type="text" name="nickname">
                    </div>
                    <div class="form-group">
                        <label class="control-label">性别：</label>
                        <select class="form-control" name="gender">
                            <option value="男" selected>男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="control-label">年龄：</label>
                        <input class="form-control" type="number" name="age">
                    </div>
                    <div class="form-group">
                        <label class="control-label">电话：</label>
                        <input class="form-control" type="text" name="phone">
                    </div>
                    <div class="form-group">
                        <label class="control-label">邮箱：</label>
                        <input class="form-control" type="text" name="email">
                    </div>
                    <div class="form-group">
                        <label class="control-label">头像：</label>
                        <input type="file" name="photo">
                    </div>
                    <div class="form-group">
                        <label class="control-label">地址：</label>
                        <textarea class="form-control" name="address"></textarea>
                    </div>
                    <div class="form-group">
                        <label class="control-label">部门：</label>
                        <select id="department_id" class="form-control" name="department_id" >
                            {% for dep in department_list %}
                                <option value="{{ dep.id }}">{{ dep.D_name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="control-label">职位：</label>
                        <select id="position_id" class="form-control" name="position_id" ></select>
                    </div>

                    <div class="form-group">
                        <button class="btn btn-primary btn-block">提交</button>
                    </div>
                </form>
            </div>
        </div>
        <!-- /.col-lg-12 -->
    </div>
{% endblock %}

{% block body %}
    <!-- jQuery -->
    <script src="/static/lib/sb-admin/vendor/jquery/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="/static/lib/sb-admin/vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="/static/lib/sb-admin/vendor/metisMenu/metisMenu.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="/static/lib/sb-admin/dist/js/sb-admin-2.js"></script>
{% endblock %}
{% block script %}
    <script>
        $("#department_id").change(
            function () {
                console.log(1);
                var value = $(this).val();
                $.ajax(
                    {
                        url: "/oa_system/d_p/?t=" + value,
                        type: "get",
                        data: "",
                        success: function (Data) {
                            $("#position_id").empty();
                            for (var d in Data) {
                                var data = Data[d];
                                var obj = $("<option value='" + data["id"] + "'>" + data["pos_name"] + "</option>");
                                $("#position_id").append(obj);
                            }
                        },
                        error: function (error) {
                            console.log(error)
                        }
                    }
                )
            }
        )
    </script>
{% endblock %}
